<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8"/>
    <link rel="icon" href="assets/images/favicon.ico" type="img/x-ico" />
    <title>Login center</title>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="assets/css/login.css" media="all">
</head>

<body>
<div class="login-wrapper">

    <!--    <div style="padding: 10px">-->
    <!--        <img src="assets/images/logo.jpg">-->
    <!--    </div>-->

    <div class="login-body" src="assets/images/desk.jpg">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;Login center
            </div>
            <form class="layui-card-body layui-form layui-form-pane" id="userInfo">
                <input name="clientId" id="clientId" type="hidden" value="">
                <input name="clientSecret" id="clientSecret" type="hidden" value="">
                <input name="validCodeId" id="validCodeId" type="hidden" value="">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-block">
                        <input name="username" type="text" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                    <div class="layui-input-block">
                        <input name="password" type="password" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                    <div class="layui-input-block">
                        <div class="layui-row inline-block">
                            <div class="layui-col-xs7">
                                <input name="validCode" style="width:170px" type="text" lay-verify="required" class="layui-input">
                                <input name="deviceId" type="hidden"/>
                            </div>
                            <div class="layui-col-xs5" style="padding-left: 10px;">
                                <img class="login-captcha" src="#" style="display:none">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <button lay-filter="login-submit" style="background-color: #003B67" class="layui-btn layui-btn-fluid" lay-submit>登 录Login</button>
                </div>
            </form>
        </div>
    </div>


    <div class="login-footer">
        <p><a href="javascript:;" target="_blank">Copyright 2019. WuBean. All rights reserved.</a></p>
    </div>

</div>

<script type="text/javascript" src="assets/libs/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="assets/libs/login.js"></script>
<script type="text/javascript" src="module/Math.uuid.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).use(['config', 'form'], function () {

        let uuid = Math.uuid();

        var $ = layui.jquery;

        $("input[name='deviceId']").val(uuid);

        var form = layui.form;
        var config = layui.config;

        if (config.getToken()) {
            location.replace('./');
            return;
        }

        // 表单提交
        form.on('submit(login-submit)', function (obj) {
            var field = obj.field;
            field.grant_type = 'password';
            field.scope = 'app';
            field.client_id = 'webApp';
            field.client_secret = 'webApp';
            $("#clientId").val('webApp');
            $("#clientSecret").val('webApp');
            $("#validCodeId").val(field.deviceId);

            var formObject = {};
            var formArray =$("#userInfo").serializeArray();
            $.each(formArray,function(i,item){
                formObject[item.name] = item.value;
            });


            layer.load(2);
            $.ajax({
                url: config.base_server + 'api-auth/oauth/user/token',
                //url:   'http://127.0.0.1:8000/oauth/token',
                type:"post",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(formObject),
                dataType: "json",
                success: function (data) {
                    if (data.respcode=="0000") {
                        config.putToken(JSON.parse(JSON.stringify(data.oauth2AccessToken)));
                        layer.msg('登录成功', {icon: 1, time: 500}, function () {
                            location.replace('./index.html');
                        });
                    } else {
                        layer.closeAll('loading');
                        layer.msg(data.respmsg, {icon: 5, time: 500});
                    }
                },
                error: function (xhr) {
                    layer.closeAll('loading');
                    if (xhr.status == 400) {
                        var error =JSON.parse(xhr.responseText) ;

                        var error_msg = error.error_description ? error.error_description :error.resp_msg ;

                        layer.msg(error_msg ? error_msg  : xhr.statusText, {icon: 5, time: 500});
                    }else if( xhr.status  == 401){

                        var error =JSON.parse(xhr.responseText) ;

                        var error_msg = error.error_description ? error.error_description :error.resp_msg ;

                        layer.msg(error_msg ? error_msg  : xhr.statusText, {icon: 5, time: 500});
                    }
                    else if( xhr.status  == 500){
                        layer.msg('服务器异常,请联系管理员', {icon: 5, time: 500});
                    }else if( xhr.status  == 0){
                        layer.msg('网关异常,请联系管理员', {icon: 5, time: 900});
                    }
                }
            });
            return false; //阻止表单跳转
        });

        // 图形验证码
        $('.login-captcha').attr("src", config.base_server + "api-user/validata/code/"+uuid);
        $('.login-captcha').attr("style", "");

        // 图形验证码
        $('.login-captcha').click(function () {
            this.src = this.src + '?timestamp=' + (new Date).getTime();
        });

    });
</script>
<script type='text/javascript'>
    // (function(m, ei, q, i, a, j, s) {
    //     m[i] = m[i] || function() {
    //         (m[i].a = m[i].a || []).push(arguments)
    //     };
    //     j = ei.createElement(q),
    //         s = ei.getElementsByTagName(q)[0];
    //     j.async = true;
    //     j.charset = 'UTF-8';
    //     j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
    //     s.parentNode.insertBefore(j, s);
    // })(window, document, 'script', '_MEIQIA');
    // _MEIQIA('entId', 118789);
</script>
</body>
</html>